<template>
<div>
  <div style="margin-bottom: 20px">
    <el-select v-model="findSignParam.nameId" placeholder="请选择姓名"
               @change="getSignRecord"
               @blur="getSignRecord"
               clearable>
      <el-option
        v-for="item in nameSelect"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-select v-model="findSignParam.signStatus" placeholder="请选择签到状态" clearable  @change="getSignRecord" @blur="getSignRecord">
      <el-option
        v-for="item in signSelect"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="findSignParam.workStatus" placeholder="请选择签退状态" clearable @change="getSignRecord" @blur="getSignRecord">
      <el-option
        v-for="item in workSelect"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-date-picker
      @change="getSignRecord" @blur="getSignRecord"
      v-model="signDateScope"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions">
    </el-date-picker>

  </div>
  <div>
    <el-table
      border
      ref="multipleTable"
      :data="signData"
      tooltip-effect="dark"
      style="width: 100%;cursor: pointer"
      >
      <el-table-column
        prop="adminName"
        label="姓名"
        width="150">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="adminPhone"
        label="用户手机号"
        width="150">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="ip"
        label="IP"
        width="156">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="signDate"
        label="签到日期"
        width="200">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="signCount"
        label="签到次数"
        width="150">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="firstSignTime"
        label="签到时间"
        width="200">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="signStatus"
        label="签到状态"
        width="200">
        <template slot-scope="scope">
          <el-tag :type="scope.row.signStatus === 1 ? 'success' : 'danger'">
            {{ scope.row.signStatus === 1 ? '正常' : '迟到'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="endSignTime"
        label="签退时间"
        width="200">
        <!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>
      <el-table-column
        prop="workStatus"
        label="签退状态"
        width="200">
          <template slot-scope="scope" >
            <div v-if="scope.row.endSignTime">
              <el-tag :type="scope.row.workStatus === 1 ? 'success' : 'danger'">
                {{ scope.row.workStatus === 1 ? '正常' : '早退'}}
              </el-tag>
            </div>
            <div v-else>
              <el-tag type="warning">
                {{'未签退'}}
              </el-tag>
            </div>
          </template>
      </el-table-column>
    </el-table>
  </div>
  <div  style="float: right;margin-top: 10px">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 20, 30, 40]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
</template>

<script>
import signAPI from "../../api/sign";
import adminAPI from "../../api/admin";
export default {
  name: "SignManage",
  data(){
    return {
      signData:[],
      page:{
        pageSize:5,
        currentPage:1,
      },
      total:0,
      findSignParam:{
        nameId:'',
        signStatus:'',
        workStatus:'',
      },
      signDateScope:[],
      dateScope:[],
      signSelect:[
        { value:1, label:'正常'},
        { value:2, label:'迟到'},
      ],
      workSelect:[
        { value:1, label:'正常'},
        { value:2, label:'早退'},
      ],
      nameSelect:{},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods:{
    // 一頁總條數變化
    handleSizeChange(val){
      this.page.pageSize = val;
      this.getData();
    },
    // 頁數變化
    handleCurrentChange(val){
      this.page.currentPage = val;
      this.getData();
    },
    getData(){
      this.getSignRecord();
      this.getAllAdmins();// 获取用户
    },
    getSignRecord(){
      console.log("2222");
      console.log(this.signDateScope);
      signAPI.getSignRecord(this.page.currentPage, this.page.pageSize, this.findSignParam, this.signDateScope).then(res => {
        if (res){
          console.log(res.data);
          this.signData = res.data.data
          this.total = res.data.total
        }
      })
    },
    getAllAdmins(){
      adminAPI.getAdmins().then(res => {
        if (res){
          console.log("23232");
          console.log(res.data);
          this.nameSelect = res.data;
        }
      })
    },
    // changeData(){
    //   this.signDateScope = [this.dateScope[0], this.dateScope[1]];
    //   this.getSignRecord()
    // }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>

</style>
